<template>
  <a-modal
    title="价格对比分析"
    width="1000px"
    :visible="isModalVisible"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="analysis">
      <div>
        <a-select
          v-model:value="params.biddingCompany"
          placeholder="招标单位"
          @change="handleSelect()"
          allow-clear
          style="width: 150px; margin-right: 8px"
        >
          <a-select-option v-for="(item, index) in biddingCompanyOptions" :key="index" :value="item.biddingCompany">{{item.biddingCompany}}</a-select-option>
        </a-select>
        <a-select
          v-model:value="params.procurementObj"
          placeholder="采购对象"
          @change="handleSelect()"
          style="width: 150px; margin-right: 8px"
        >
          <a-select-option v-for="(item, index) in procurementObjOptions" :key="index" :value="item.procurementObj">{{item.salaryColumnComment}}</a-select-option>
        </a-select>
        <a-select
          v-model:value="params.date"
          placeholder="对比时间范围"
          @change="handleSelect()"
          style="width: 150px; margin-right: 8px"
        >
          <a-select-option v-for="(item, index) in dateOptions" :key="index" :value="item.value">{{item.name}}</a-select-option>
        </a-select>
      </div>
      <div class="chart">
        <div class="chart-lt">
          <span>{{procurementObjName}} {{dateName}}</span>
          <span>{{dateArea}}</span>
          <span>平均成交价(元/人)</span>
          <span>{{detailInfo && detailInfo.avgSalary ? parseFloat(detailInfo.avgSalary.toFixed(4)) : 0}}</span>
        </div>
        <div class="chart-rt">
          <div id="main"></div>
          <div class="chart-radio">
            <a-radio-group v-model:value="params.statisticGroup" @change="handleSelect()" >
              <a-radio :value="0">按天展示</a-radio>
              <a-radio :value="1">按周展示</a-radio>
              <a-radio :value="2">按月展示</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue'
  import * as echarts from 'echarts'
  import { statsitic } from '/@/api/priceLibrary'

  const isModalVisible = ref(false)
  const params = ref({biddingCompany: null, procurementObj: null, date: 6, statisticGroup: 2})
  const procurementObjName = ref('')
  const dateName = ref('')
  const dateArea = ref('')
  const detailInfo = ref(null)
  const biddingCompanyOptions = ref(null)
  const procurementObjOptions = ref(null)
  const dateOptions = ref([{name: '近一月', value: 1}, {name: '近三月', value: 3}, {name: '近半年', value: 6}, {name: '近一年', value: 12}])

  // 柱状图相关变量
  let myChart = ref()
  let option = ref({})

  const opsName = (options, val, field, name) => {
    const op = options.find(item => item[field] === val)
    return op ? op[name] : ''
  }

  const showModal = (biddingCompany) => {
    params.value['biddingCompany'] = biddingCompany ? biddingCompany : null
    isModalVisible.value = true
    nextTick(() => {
      init([], [])
      handleSelect(true)
    })
  }

  const handleSelect = async (isInit) => {
    const param = JSON.parse(JSON.stringify(params.value))
    const date = formatDate(param.date)
    param.startDate = date[0], param.endDate = date[1], delete param.date
    const res = await statsitic(param)
    detailInfo.value = res
    biddingCompanyOptions.value = res.biddingCompanyList
    procurementObjOptions.value = res.procurementObjList
    isInit ? params.value['procurementObj'] = procurementObjOptions.value[0].procurementObj : ''
    procurementObjName.value = opsName(procurementObjOptions.value, params.value['procurementObj'], 'procurementObj', 'salaryColumnComment')
    dateName.value = opsName(dateOptions.value, params.value['date'], 'value', 'name')
    dateArea.value = param.startDate + ' 至 ' + param.endDate
    let sumArr = [], timeArr = []
    if(res.statistics){
      res.statistics.forEach((item) => {
        sumArr.push({value: item.salarySum, itemStyle: { color: '#5087EC' }})
        timeArr.push(item.time)
      })
    }
    init(sumArr, timeArr)
  }

  const init = (sumArr, timeArr) => {
    // 基于准备好的dom，初始化echarts实例
    myChart.value = echarts.init(document.getElementById('main'));
    option.value = {
      tooltip: {
      },
      grid: {
        left: '1%', //默认10%
        right: '1%', //默认10%
        top: '5%', //默认60
        containLabel: true
      },
      xAxis: {
        data: timeArr
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            // 设置间隔线（分隔线）的颜色
            color: '#F0F0F0'
          }
        }
      },
      series: [
        {
          type: 'line',
          data: sumArr
        }
      ],
      dataZoom: [{ // 这部分是dataZoom的配置
        type: 'slider', // 这里可以选择你需要的dataZoom类型
        start: 0, // 默认数据初始选择范围为10%
        end: 100 // 默认显示100%的数据
      }],
      barMaxWidth: 30
    };
    myChart.value.setOption(option.value)
  }

  const handleCancel = () => {
    params.value = {biddingCompany: null, procurementObj: null, date: 6, statisticGroup: 2}
    myChart.value.dispose()
    isModalVisible.value = false
  }

  const formatDate = (val) => {
    const datetime = new Date()
    const Year = datetime.getFullYear()
    const Month = datetime.getMonth() + 1
    const Day = datetime.getDate()
    let timeArr = ['', '']
    switch (val) {
      case 1:
        if (Month > 1) {
          timeArr[0] = Year + "-" + takeDate((Month - 1)) + "-"+ takeDate(Day)
        } else {
          timeArr[0] = Year - 1 + "-" + takeDate(12 + Month - 1) + "-"+ takeDate(Day)
        }
        timeArr[1] = Year + "-" + takeDate(Month) + "-" + takeDate(Day)
        break;
      case 3:
        if (Month > 3) {
          timeArr[0] = (Year) + '-' + takeDate(Month - 3) + '-' + takeDate(Day)
        } else {
          timeArr[0] = (Year - 1) + '-' + takeDate(12 + Month - 3) + '-' + takeDate(Day)
        }
        timeArr[1] = Year + "-" + takeDate(Month) + "-" + takeDate(Day)
        break;
      case 6:
        if (Month > 6) {
          timeArr[0] = Year + "-" + takeDate(Month - 6) + "-"+ takeDate(Day)
        } else {
          timeArr[0] = Year - 1 + "-" + takeDate(12 + Month - 6) + "-"+ takeDate(Day)
        }
        timeArr[1] = Year + "-" + takeDate(Month) + "-" + takeDate(Day)
        break;
      case 12:
        timeArr[0] = Year - 1 + "-" + takeDate(Month) + "-" + takeDate(Day)
        timeArr[1] = Year + "-" + takeDate(Month) + "-" + takeDate(Day)
        break;
    }
    return timeArr
  }

  const takeDate = (val) => {
    return val < 10 ? '0' + val : val
  }

  // 子组件默认包含是私有
  defineExpose({
    showModal
  })
</script>

<style lang="less" scoped>
.analysis{
  padding: 24px 24px 0;
  .chart{
    display: flex;
    flex-direction: row;
    margin-top: 26px;
    .chart-lt{
      width: 320px;
      height: 300px;
      padding-top: 70px;
      margin-right: 26px;
      margin-bottom: 110px;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      span{
        display: block;
        text-align: center;
        font-size: 22px;
        &:nth-child(2){
          font-size: 14px;
        }
        &:nth-child(4){
          font-size: 38px;
          font-weight: bold;
        }
      }
    }
    .chart-rt{
      position: relative;
      #main{
        width: 610px;
        height: 360px;
      }
      .chart-radio{
        position: absolute;
        left: 30%;
        bottom: 30px;
      }
    }
  }
}

</style>
